<template>
  <CustomTabs :tabsData="tabsData" :selectVal="selectVal" @onChange="selectTag">
    <div class="contentBox">
      <!-- <el-tabs class="elTab" v-model="activeId" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tagTabsData"
          :key="'tab' + index"
          :label="item.name"
          :name="item.objectId"
        ></el-tab-pane>
      </el-tabs> -->
      <div class="sortLeft" v-if="this.selectVal === '1'">
        <div
          class="sortItem"
          v-for="(item, index) in sortData"
          :key="'sort' + index"
        >
          <div v-if="index !== 0" class="line"></div>
          <div
            :class="sortVal === item.value ? 'active' : ''"
            @click="changeSort(item.value)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div v-loading="courseLoading">
      <div class="courseList">
        <div
          class="courseItem"
          v-for="(item, index) in listData"
          :key="'course' + index"
        >
          <div class="line" v-if="index !== 0"></div>
          <CourseCardHorizontal
            class="courseCardHorizontal"
            :type="selectVal === '1' ? 'personal' : 'default'"
            :cardData="item"
            @updateList="getMyLearn"
          ></CourseCardHorizontal>
        </div>
      </div>
      <div class="pagination" v-if="listData.length">
        <CustomPagination
          layout="prev, pager, next"
          :total-items="totalItems"
          :page-size="pageSize"
          :current-page="pageNum"
          @pagination-current-change="handleCurrentChange"
        ></CustomPagination>
      </div>
      <el-empty v-if="!listData.length && !courseLoading" description="暂无数据"></el-empty>
    </div>
  </CustomTabs>
</template>

<script>
import CustomTabs from '@/components/CustomTabs.vue';
import CourseCardHorizontal from '@/components/CourseCardHorizontal.vue';
import CustomPagination from '@/components/CustomPagination.vue';
import { mapActions } from 'vuex';
import { selectMyJoinedCourse, loadMyFavList } from '@/api/personal';

export default {
  name: 'Banner',
  components: { CustomTabs, CourseCardHorizontal, CustomPagination },
  props: {},
  data() {
    return {
      isChecked: false,
      tabsData: [
        {
          name: '我的学习',
          value: '1',
        },
        {
          name: '我的收藏',
          value: '2',
        },
      ],
      // 选择大的分类
      selectVal: '1',
      tagTabsData: [],
      activeId: '',
      // 筛选数据
      sortData: [
        {
          name: '全部',
          value: 'ALL',
        },
        {
          name: '学习中',
          value: 'START',
        },
        {
          name: '已学完',
          value: 'END',
        },
      ],
      sortVal: 'ALL',
      pageNum: 1,
      pageSize: 10,
      totalItems: 0,
      listData: [],
      courseLoading: true
    };
  },
  mounted() {
    this.getType();
    this.getMyLearn();
  },
  methods: {
    ...mapActions(['getAllType']),
    // 获取分类
    async getType() {
      try {
        const resData = await this.getAllType({ type: 'COURSE' });
        this.tagTabsData = resData;
        this.activeId = resData[0].objectId;
      } catch (error) {
        console.error(error);
      }
    },
    // 获取列表数据
    getPageList() {
      this.getMyLearn();
    },
    // 获取我的学习
    async getMyLearn() {
      try {
        this.courseLoading = true;
        const params = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          status: this.sortVal === 'ALL' ? undefined : this.sortVal,
        };
        const resData = await selectMyJoinedCourse(params);
        this.listData = resData.list || [];
        this.totalItems = resData.total;
        this.courseLoading = false;
      } catch (error) {
        this.courseLoading = false;
        console.error(error);
      }
    },
    // 获取我的收藏
    async getMyFav() {
      try {
        this.courseLoading = true;
        const params = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        };
        const resData = await loadMyFavList(params);
        this.listData = resData.list || [];
        this.totalItems = resData.total;
        this.courseLoading = false;
      } catch (error) {
        this.courseLoading = false;
        console.error(error);
      }
    },

    // 选择大的分类
    selectTag(tab) {
      if (tab === this.selectVal) return;
      this.selectVal = tab;
      this.pageNum = 1;
      if(tab === '1') {
        this.getMyLearn()
      }
      if(tab === '2') {
        this.getMyFav()
      }
    },

    // 改变筛选
    changeSort(val) {
      if(this.sortVal === val) return;
      this.pageNum = 1;
      this.sortVal = val;
      this.getPageList();
    },
    // 处理当前页变化的逻辑
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getPageList();
    },
    handleClick() {},
  },
};
</script>
<style lang="scss" scoped>
.contentBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .elTab {
    ::v-deep .el-tabs__header {
      margin: 0;
      .el-tabs__nav-wrap {
        &:after {
          display: none;
        }
        .el-tabs__item {
          font-size: 16px;
          font-weight: 600;
          height: 30px;
          line-height: 30px;
          padding: 0 18px;
          color: $text-color-secondary;
          &:hover {
            color: $primary-color;
          }
          &:nth-child(2) {
            padding-left: 0;
          }
        }
        .el-tabs__item.is-active {
          color: $primary-color;
        }
        .el-tabs__active-bar {
          height: 2px;
          background-color: $primary-color;
        }
      }
    }
  }
  .sortLeft {
    display: flex;
    align-items: center;
    .sortItem {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: $text-color-secondary;
      cursor: pointer;

      .line {
        width: 1px;
        height: 20px;
        margin: 0 28px;
        background: #e2e2e2;
      }

      .active {
        color: $text-color-primary;
      }
    }
  }
}
.courseList {
  width: 100%;
  border-radius: 8px;
  margin-top: 16px;
  .courseItem {
    width: 100%;
    .line {
      width: 100%;
      height: 1px;
      margin: 16px 0;
      background: #f0f0f0;
    }
    .courseCardHorizontal {
      width: 100%;
      height: 124px;
      ::v-deep .cardBanner {
        width: 206px;
      }
      ::v-deep .cardInfo {
        padding-left: 16px;
      }
      ::v-deep .cardTitle {
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        -webkit-line-clamp: 1;
        margin-bottom: 8px;
      }
    }
  }
}

.pagination {
  background-color: #fff; /* 举例背景色 */
  padding: 14px; /* 举例内边距 */
  text-align: center;
  margin-top: 24px;
}
</style>
